<template>
  <div id="app">
    <div class="tit">
      <span class="iconfont icon-fanhui" @click="back"></span>
      <p class="h1">收货地址</p>
    </div>
    <ul>
      <li>
        <div class="addressbox">
          <div class="data">
            <div class="left">
              <div class="msg">
                <p class="name">范贤明</p>
                <p class="tel">13555555555</p>
              </div>
              <p class="address">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
            </div>
            <p class="right">
              <span class="iconfont icon-shanchu" @click="del"></span>

              <span class="iconfont icon-xiugai" ></span>
            </p>
          </div>
        </div>
        <mt-radio
                v-model="value"
                :options="def">
        </mt-radio>
      </li>
    </ul>
    <a class="add" href="./add.html" ><span class="iconfont icon-21"></span>新增地址</a>
  </div>
</template>
<script>
    export default {
        name:'App',
        components:{

        },
        data(){
            return{
                regionVisible: false,
                value:'',
                def:['默认地址'],

            }
        },
        mounted(){

        },
        methods:{
            back(){
                this.$router.go(-1)
            },
            del(){
               this.$messagebox({
                   title: '提示',
                   message: '确定删除该选项吗',
                   showCancelButton: true,
                   confirmButtonText:"确定",
                   cancelButtonText:"取消"
               }).then(action => {
                   if(action == 'confirm'){
                       console.log('确定')
                   }else{
                       console.log('取消')
                   }
               }).catch(()=>{
                   console.log('网络错误')
               })
           },
        }
    }
</script>
<style lang="less">
  @baseFontSize:20px;
  @baseSize:20;
  html{
    font-size: @baseFontSize;
  }
  .px2rem(@name,@px){
      @{name}:@px / 2 / @baseSize * 1rem;
  }

  *{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
  }
#app {
  background: #f5f5f5;
  .tit{
    position: relative;
    background: orange;

    span{
      position: absolute;
      left: 15px;
      top: 10px;
    }
    .h1{
      color: white;
      text-align: center;
      .px2rem(line-height,80);
      .px2rem(height,80);
      border-bottom: 1px solid gray;
    }
  }
  ul{
    li{
      background: white;
      border-bottom: 1px solid gainsboro;
      .px2rem(margin-top,20);
      .addressbox{
        .px2rem(margin-top,20);
        .data{
          display: flex;
          .left{
            .px2rem(padding-left,20);
            .mint-cell-wrapper{
              border: none;
            }
            .msg{
              .px2rem(margin-top,20);
              display: flex;
            }
            .address{
              .px2rem(font-size,30);
              .px2rem(line-height,80);
            }
          }
          .right{
            .px2rem(margin-top,20);
            .px2rem(margin-left,40);
            span{
              .px2rem(margin-left,30);
              .px2rem(font-size,45)
            }
          }
        }
        input{
          .px2rem(width,30);
          .px2rem(height,30);
          .px2rem(margin-left,20);
          .px2rem(margin-top,20);
        }
        label{
          .px2rem(font-size,30);
          .px2rem(margin-left,30);
        }
      }
    }
  }
  .add{
    position: absolute;
    left: 0;
    bottom: 0;
    .px2rem(width,750);
    .px2rem(height,80);
    background: orangered;
    color: white;
    outline: none;
    border: none;
    text-align: center;
    .px2rem(font-size,30);
    .px2rem(line-height,80);
  }
}


</style>
